<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 1200px;
            height: 500px;
            margin: 100px auto;
        }
        li{
            list-style: none;
            width: 33%;
            float: left;
            height: 100px;
            background: greenyellow;
            border: 1px solid #ccc;
            text-align: center;
            font-size: 20px;
            line-height: 100px;
        }
    </style>
</head>
<body>
    <div id="app">

    </div>
    <script type="text/javascript" src='../vue/dist/vue.js'></script>
    <script type="text/javascript">
    // 总结：slot其实就是父组件传递的dom结构
    // vue提供的内置组件<slot></slot>
    // 卡槽slot
    var myLi = {
        template: `
            <li>
                <slot></slot>
            </li>
        `
    };
    Vue.component('my-li',myLi);

    //入口组件：在内部实现一个九宫
        var App = {
            template: `<div>
                <ul>
                    <my-li><h1>1111111</h1></my-li>
                    <my-li>2</my-li>
                    <my-li>3</my-li>
                    <my-li>4</my-li>
                    <my-li>5</my-li>
                    <my-li>6</my-li>
                    <my-li>7</my-li>
                    <my-li>8</my-li>
                    <my-li>9</my-li>
                </ul>

            </div>`,
            data: function(){
                return {

                }
            },

        };

        new Vue({
            el: '#app',
            components: {
                app: App
            },
            template:'<app/>'
        });

    </script>
</body>
</html>